<!--
 * @Author: your name
 * @Date: 2020-12-28 10:55:55
 * @LastEditTime: 2020-12-28 11:28:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\box\biankuang.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框设计</title>
    <style>
        /*一次为四个边进行定义*/
        /* h2{
            border-style: outset;
            border-width: 20px;
            border-color: #8e44ad;
        } */

        /*样式顺序为上右下左，可以分别进行定义*/
        /* h2{
            border-style: outset solid dotted double;
            border-width: 8px;
        } */

        /* h2{
            border-bottom-style: dotted;
            border-bottom-width: 10px;
            border-bottom-color: #3498db;
        } */

        /*简写规则*/
        /* h2{
            border-top: dashed 5px green;
            border-right: double 5px #e74c3c;
            border-bottom: solid 5px red;
            border-left: inset 5px rebeccapurple;            
        }
        em{
            border-bottom: solid 10px #2ecc71;
        } */


        h2{
            width: 200px;
            height: 200px;
            border: solid 2px red;
            border-radius: 10px;
        }

        /*通过边框设置圆*/
        div{
            width: 100px;
            height: 100px;
            border: solid 3px red;
            border-radius: 50%;
        }


        /*行元素设置圆角*/
        em{
            padding-bottom: 5px;
            border-bottom:2px solid red;
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <h2>hdcms.com</h2>
    <em>houdunren.com</em>
    <hr>
    <div></div>
</body>
</html>